/*========================框架样式=======================*/
@font-face {
    font-family:WenYueXinQingNian;
    src:url('../myfont/WenYueXinQingNian.woff')
}

@font-face {
    font-family:SourceHanL;
    src:url('../myfont/Source Han Sans CN Light.woff')
}

@font-face {
    font-family:SourceHanN;
    src:url('../myfont/Source Han Sans CN Normal.woff')
}

@font-face {
    font-family:FZHei;
    src:url('../myfont/FZHei-B01S.woff')
}

* {
    padding:0px;
    margin:0px;
    font-size:16px;
}
html,body{
    width:80%;
    height:100%;
    overflow:hidden;}
#screen{
    position: absolute;
    width: 100%;height: 100%;
    z-index: 100;
    left:0px;top:0px;
}
.info{
    position: relative;
    z-index: 20;
    left: 0px;
    background: #e4c77b;
}
#root {
    position:absolute;
    width:100.000%;
    height:100.000%;
    top:0%;

}
#container {
    position:absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
}
.content {
    position:absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    overflow:hidden;
}

.button {
    position:absolute;
    opacity:0.5;
    cursor:pointer;
    z-index:5;
}

.title {
    background:#1666a5;
    font-size:1.8rem;
    font-family:WenYueXinQingNian;
    color:#fff;
    padding:5px 10px;
    border-radius:20px;
    position:absolute;
    left:14.163%;
    top:9.867%;
    letter-spacing:2px;
    z-index:5;
}

.submit, .next {
    width:8.682%;
    height:6.533%;
    position:absolute;
    z-index:2;
    top:84.000%;
    left:76.970%;
    cursor:pointer;
}

.retry {
    width:8.682%;
    height:6.533%;
    position:absolute;
    z-index:2;
    top:84.000%;
    left:67.734%;
    cursor:pointer;
}

.wword {
    color:#fff;
    width:40.640%;
    height:6.667%;
    position:absolute;
    z-index:2;
    top:48.000%;
    left:35.099%;
    text-align:center;
    line-height:6.667%;
    font-family:SourceHanL;
    font-size:24px;
}

.rword {
    color:#fff;
    width:40.640%;
    height:6.667%;
    position:absolute;
    z-index:2;
    top:48.000%;
    left:35.099%;
    text-align:center;
    line-height:1.5;
    font-family:SourceHanL;
    font-size:24px;
    padding:10px;
    box-sizing:border-box;
}

.maskout {
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
}

.mask {
    width:100%;
    position:absolute;
}

.close {
    width:3.695%;
    position:absolute;
    z-index:2;
    top:0.667%;
    right:5px;
    cursor:pointer;
}

.qContent {
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
}

.contbg {
    width:100%;
}

/*----------opening----------*/
#opening {
    background:url('../asserts/opening.jpg') no-repeat 100% 100%;
    background-size:100% 100%;
}

#bntOpen {
    width:23.768%;
    height:13.867%;
    cursor:pointer;
    position:absolute;
    left:14.594%;
    top:34.933%;
}

/*----------begin----------*/
#begin {
    background:url('../asserts/begin.jpg') no-repeat 100% 100%;
    background-size:100% 100%;
}

#btnBegin {
    width:24.631%;
    height:16.000%;
    cursor:pointer;
    position:absolute;
    left:37.562%;
    top:44.800%;
}

/*----------------p1-------------------*/
.drag1 {
    position:absolute;
    width:9.852%;
    height:34.667%;
    cursor:pointer;
    top:33.333%;
}

#drag110 {
    left:51.724%;
    background:url('./asserts/1_10.png') no-repeat;
    background-size:100% 100%;
}

#drag111 {
    left:38.177%;
    background:url('./asserts/1_11.png') no-repeat;
    background-size:100% 100%;
}

#drag112 {
    left:65.271%;
    background:url('./asserts/1_12.png') no-repeat;
    background-size:100% 100%;
}

#drag113 {
    left:24.631%;
    background:url('./asserts/1_13.png') no-repeat;
    background-size:100% 100%;
}

/*----------------p2-------------------*/


.drag2 {
    position:absolute;
    width:7.759%;
    height:21.200%;
    cursor:pointer;
    top:21.333%;

}

#drag20 {
    top:21.333%;
    left:47.414%;
    background:url('./asserts/d2_0.png') no-repeat;
    background-size:100% 100%;
}

#drag21 {
    top:21.333%;
    left:55.419%;
    background:url('./asserts/d2_1.png') no-repeat;
    background-size:100% 100%;
}

#drag22 {
    top:21.333%;
    left:63.424%;
    background:url('./asserts/d2_2.png') no-repeat;
    background-size:100% 100%;
}

#drag23 {
    top:21.333%;
    left:71.429%;
    background:url('./asserts/d2_3.png') no-repeat;
    background-size:100% 100%;

}

#drag24 {
    top:42.667%;
    left:47.414%;
    background:url('./asserts/d2_4.png') no-repeat;;
    background-size:100% 100%;
}

#drag25 {
    top:42.667%;
    left:55.419%;
    background:url('./asserts/d2_5.png') no-repeat;
    background-size:100% 100%;
}

#drag26 {
    top:42.667%;
    left:63.424%;
    background:url('./asserts/d2_6.png') no-repeat;;
    background-size:100% 100%;
}

#drag27 {
    top:42.667%;
    left:71.429%;
    background:url('./asserts/d2_7.png') no-repeat;
    background-size:100% 100%;

}

.smallBag {
    position:absolute;
    left:36.946%;
    bottom:18%;
    width:4.926%;
    transition:width 0.1s linear;
}

.bigBag {
    position:absolute;
    left:36.946%;
    bottom:18%;
    width:6.773%;
    transition:width 0.1s linear;
}

.cupsOut{
    width:17.241%;
    height:13.333%;
    border-radius:10px;
    position:absolute;
    left:61.576%;
    bottom:140px;
}
.cups{
    position:absolute;
    top:66%;
    width:2.894%;
    height: 8%;
    text-align:center;
    cursor:pointer;
}
.cups>img{
    width:100%;

    text-align:center;
}
.cups>p{
    font-size:0.4rem;
    color:#1666A5;
    margin-top:-8px;
    text-align:center;
}

.bgcups{
    position:absolute;
    width:7.759%;
    height:21.200%;
}


/*-----------------p3------------------*/

.btncof {
    width:9.914%;
    height:18.667%;
    position:absolute;
    z-index:2;
    top:53.333%;
    left:40.025%;
    cursor:pointer;
}

.btncof > img {
    position:absolute;
    z-index:5;
}

.circle {
    width:6%;
    height:12%;
    position:absolute;
    z-index:1;
    top:53.333%;
    left:1.847%;
    background:#1666a5;
    border-radius:50px;
    border:#1666a5 solid 5px;
}

.circle_on {
    width:6%;
    height:12%;
    position:absolute;
    z-index:1;
    top:53.333%;
    left:1.847%;
    background:#1666a5;
    border-radius:50px;
    border:#e4c77b solid 5px;
}

/*-----------p4--------------------*/
.drag4 {
    position:absolute;
    width:9.852%;
    height:22.667%;
    cursor:pointer;
    top:32.0%;
    z-index:1;
    text-align:center;
}
.drag4>p{
    margin-top:105.000%;
    font-size:1.0rem;
    color:#1565A2;
}

#drag41 {
    background:url('./asserts/d4_03.gif') no-repeat;
    background-size:100% 100%;
    left:38.177%;
}

#drag42 {
    background:url('./asserts/d4_04.gif') no-repeat;
    background-size:100% 100%;
    left:65.271%;

}

#drag43 {
    background:url('./asserts/d4_05.png') no-repeat;
    background-size:100% 100%;
    left:51.724%;
}

#drag44 {
    background:url('./asserts/d4_06.gif') no-repeat;
    background-size:100% 100%;
    left:24.015%;
}

/*-----------p4--------------------*/
.drag5 {
    position:absolute;
    width:12.315%;
    height:6.000%;
    cursor:pointer;
    left:41.872%;
    z-index:1;
    text-align:center;
    background:#1666a5;
    border-radius:5px;
    color:#fff;
    font-family:SourceHanN;
    font-size:1rem;
}

.drag5L {
    position:absolute;
    width:9.852%;
    height:4.667%;
    left:21.552%;
    z-index:1;
    text-align:center;
    background:#DCFFFF;
    border-radius:5px;
    color:#1666a5;
    font-family:SourceHanN;
    font-size:1rem;
    cursor: pointer;
}

.drag5R {
    position:absolute;
    width:9.852%;
    height:4.667%;
    left:68.966%;
    z-index:1;
    text-align:center;
    background:#DCFFFF;
    border-radius:5px;
    color:#1666a5;
    font-family:SourceHanN;
    font-size:1rem;
    cursor: pointer;

}

.L5 {
    position:absolute;
    width:11.084%;
    height:24.000%;
    left:20.936%;
    top:18.667%;
    z-index:0;
}

.R5 {
    position:absolute;
    width:11.084%;
    height:24.000%;
    left:68.350%;
    top:18.667%;
    z-index:0;
}

.LR5 {
    border:#1666a5 solid 1px;
}

#rwd4 {
    text-align:center;
    padding-top:2.667%;
}

/*-----------p4--------------------*/

.outbtn {
    position:absolute;
    width:20.320%;
    height:18.667%;
    cursor:pointer;
    box-sizing:border-box;
    font-family:SourceHanN;
    background:#e8b989;
    border-radius:10px;
    border:#e8b989 solid 3px;
    display: table;
    vertical-align: middle;
}

.outbtn_on {
    position:absolute;
    width:20.320%;
    height:18.667%;
    cursor:pointer;
    box-sizing:border-box;
    font-family:SourceHanN;
    background:#e8b989;
    border-radius:10px;
    border:#5484e4 solid 3px;
    display: table;
    vertical-align: middle;
}

#flexbox6 > div > p {
    font-size:0.9rem;
    padding-right: 19%;
    display: table-cell;
    vertical-align: middle;
}

#flexbox6 > div > img {
    position:absolute;
    right:-0.616%;
    height:100%;
}

.outbtn > img {
    position:absolute;
    right:-10px;
    top:1.333%;
}

#outbtn0 {
    left:34.483%;
    top:37.333%;
}

#outbtn1 {
    left:56.650%;
    top:37.333%;
}

#outbtn2 {
    left:34.483%;
    top:58.667%;
}

#outbtn3 {
    left:56.650%;
    top:58.667%;
}

#rwd6 {
    text-align:left;
    top:40.000%;
}

/*-------------------p7------------------*/
.lrdiv7 {
    z-index:3;
    position:absolute;
    width:17.057%;
    height:14.133%;
    cursor:pointer;
    display: table;
    vertical-align: middle;
}

.lrdiv7 > img {
    position:absolute;
    width:100%;
    height:100%;
    top:0.000%;
    left:0%;
    z-index:-1;
}

.lrdiv7 > p {
    font-family:SourceHanN;
    font-size:1rem;
    text-align:center;

    display: table-cell;
    vertical-align: middle;
}

.lrdiv7:nth-child(1) {
    top:38.667%;
    left:52.956%;
}

.lrdiv7:nth-child(2) {
    top:24.000%;
    left:58.498%;
}

#rword7 {
    text-align:left;
    top:40.000%;
}

#final{
    top:83.733%;
    left:77.401%;
}

